<template>
	<div>
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
		<el-tab-pane class="one"  label="雇主列表" name="first">
				 			<div class="value" style="margin: 23px 0 23px 0;display: flex;flex-direction: column; ">
				 				<div style="display: flex;justify-content: space-around;width:100%;">
									<div class="input">
										<p style="line-height: 40px;">会员名称:</p>
										<el-input v-model="form.nickname" placeholder="请输入内容"></el-input>
									</div>
									<div class="input">
										<p style="line-height: 40px;">实名姓名:</p>
										<el-input v-model="form.name" placeholder="请输入内容"></el-input>
									</div>
									<div class="input">
										<p style="line-height: 40px;">性别:</p>
										<el-select v-model="form.sex" placeholder="请选择">
										    <el-option
										      v-for="item in options"
										      :key="item.value"
										      :label="item.lable"
										      :value="item.value">
										    </el-option>
										  </el-select>
									</div>
									<div class="input"@click="address_box=true">
										<p style="line-height: 40px;">居住地:</p>
										<el-input v-model="form.address" placeholder="请输入内容"></el-input>
									</div>
									<div></div>
								</div>
								<div style="display: flex;justify-content: space-around;margin:32px 0px 7px 8px;">
									<div class="block">
									    <span class="demonstration">注册时间</span>
									    <el-date-picker
									      v-model="value1"
									      type="daterange"
										  value-format="yyyy-MM-dd HH:mm"
									      range-separator="至"
									      start-placeholder="开始日期"
									      end-placeholder="结束日期">
									    </el-date-picker>
									  </div>
									  <div class="input">
									  	<p style="line-height: 40px;width: 60px;">年龄段:</p>
									  	<el-input v-model="form.ageStart" style="width: 190px;" placeholder="请输入内容"></el-input><span style="line-height: 40px;">至</span><el-input style="width: 190px;" v-model="form.ageEnd" placeholder="请输入内容"></el-input>
									  </div>
									  <div class="input">
									  	<p style="line-height: 40px;">手机号码:</p>
									  	<el-input v-model="form.telnum" placeholder="请输入内容"></el-input>
									  </div>
									  <el-button type="primary" style="
									      width: 155px;
									      height: 42px;
									      background: #004DD5;
									  	  font-size: 17px;
									  	  font-family: PingFang SC;
									  	  font-weight: 500;
									  	  line-height: 18px;
									  	  color: #FFFFFF;" @click="query('1')">查询</el-button>
								</div>
				 				  
				 				   
				 			</div>
							<el-table :data="tableData" style="width: 100%">
							     <el-table-column 
							       label="会员ID"
									prop="tdaccount"
							       width="180">
							     </el-table-column>
							     <el-table-column
							       prop="nickname"
							       label="会员姓名"
							       width="180">
							     </el-table-column>
							     <el-table-column
							       prop="name"
							       label="实名姓名">
							     </el-table-column>
								  <el-table-column
								    prop="idnumber"
								    label="证件号码"
								    width="180">
								  </el-table-column>
								  <el-table-column
								    prop="sex"
								    label="性别"
								    width="180">
								  </el-table-column>
								  <el-table-column
								    prop="birthDay"
								    label="出生日期">
								  </el-table-column>
								  <el-table-column
								    prop="telnum"
								    label="手机号码">
								  </el-table-column>
								  <el-table-column
								    prop="createTime"
								    label="注册时间">
								  </el-table-column>
								 <el-table-column prop="date" label="操作" width="180">
								 	<template slot-scope="scope">
								 		<div class="btn_home">
											<el-button  type="text" size="small" @click="employerinf(scope.row)">雇主信息</el-button>
											<el-button  type="text" size="small" @click="comment(scope.row)">点评</el-button>
											<el-button  type="text" size="small" @click="block(scope.row)">拉黑</el-button>
										</div>
								 	</template>
								 </el-table-column>
							   </el-table>
				 			 <!-- <el-table
				 			      :data="tableData"
				 			      style="width: 100%;">
				 			      <el-table-column prop="tdaccount" label="会员ID" width="160"></el-table-column>
				 				  <el-table-column prop="nickname" label="会员姓名" width="160"></el-table-column>
				 				  <el-table-column prop="name" label="实名姓名" width="160"></el-table-column>
				 				  <el-table-column prop="idnumber" label="证件号码" width="170"></el-table-column>
				 				  <el-table-column prop="sex" label="性别" width="170"></el-table-column>
				 				  <el-table-column prop="birthDay" label="出生日期" width="170"></el-table-column>
				 				  <el-table-column prop="telnum" label="手机号码" width="170"></el-table-column>
								  <el-table-column prop="createTime" label="注册时间" width="170"></el-table-column>
				 				  <el-table-column label="操作" width="300">
				 					   <template slot-scope="scope">
				 					          <el-button style="border: 1px solid; width: 76px;"  type="text" size="small" @click="employerinf(scope.row)">雇主信息</el-button>
				 					          <el-button style="border: 1px solid; width: 76px;" type="text" size="small" @click="comment(scope.row)">点评</el-button>
				 					          <el-button style="border: 1px solid; width: 76px;" type="text" size="small" @click="block(scope.row)">拉黑</el-button>
				 					    </template>
				 				  </el-table-column>
				 			    
				 			    </el-table> -->
				 		</el-tab-pane>
		  <el-tab-pane label="黑名单" name="second">
			  <div class="value" style="margin: 23px 0 23px 0;display: flex;flex-direction: column; ">
			  	<div style="display: flex;justify-content: space-around;width: 100%;">
			  		<div class="input">
			  			<p style="line-height: 40px;">会员名称:</p>
			  			<el-input v-model="form.nickname" placeholder="请输入内容"></el-input>
			  		</div>
			  		<div class="input">
			  			<p style="line-height: 40px;">实名姓名:</p>
			  			<el-input v-model="form.name" placeholder="请输入内容"></el-input>
			  		</div>
			  		<div class="input">
			  			<p style="line-height: 40px;">性别:</p>
			  			<el-select v-model="form.sex" placeholder="请选择">
			  			    <el-option
			  			      v-for="item in options"
			  			      :key="item.value"
			  			      :label="item.lable"
			  			      :value="item.value">
			  			    </el-option>
			  			  </el-select>
			  		</div>
			  		<div class="input" @click="address_box=true">
			  			<p style="line-height: 40px;">居住地:</p>
			  			<el-input v-model="form.address"  placeholder="请输入内容"></el-input>
			  		</div>
			  		<div></div>
			  	</div>
			  	<div style="display: flex;justify-content: space-around;margin: 32px 0 7px 8px;">
			  		<div class="block">
			  		    <span class="demonstration">注册时间</span>
			  		    <el-date-picker
			  		      v-model="value1"
			  		      type="daterange"
						  value-format="yyyy-MM-dd HH:mm"
			  		      range-separator="至"
			  		      start-placeholder="开始日期"
			  		      end-placeholder="结束日期">
			  		    </el-date-picker>
			  		  </div>
			  		  <div class="input">
			  		  	<p style="line-height: 40px;width: 60px;">年龄段:</p>
			  		  	<el-input v-model="form.ageStart" style="width: 190px;" placeholder="请输入内容"></el-input><span style="line-height: 40px;">至</span><el-input style="width: 190px;" v-model="form.ageEnd" placeholder="请输入内容"></el-input>
			  		  </div>
			  		  <div class="input">
			  		  	<p style="line-height: 40px;">手机号码:</p>
			  		  	<el-input v-model="form.telnum" placeholder="请输入内容"></el-input>
			  		  </div>
			  		  <el-button type="primary" style="
			  		      width: 155px;
			  		      height: 42px;
			  		      background: #004DD5;
			  		  	  font-size: 17px;
			  		  	  font-family: PingFang SC;
			  		  	  font-weight: 500;
			  		  	  line-height: 18px;
			  		  	  color: #FFFFFF;" @click="query('2')">查询</el-button>
			  	</div> 	   
			  </div>
			  <el-table :data="tableData" style="width: 100%">
			       <el-table-column 
			         label="会员ID"
			  		prop="tdaccount"
			         width="180">
			       </el-table-column>
			       <el-table-column
			         prop="nickname"
			         label="会员姓名"
			         width="180">
			       </el-table-column>
			       <el-table-column
			         prop="name"
			         label="实名姓名">
			       </el-table-column>
			  	  <el-table-column
			  	    prop="idnumber"
			  	    label="证件号码"
			  	    width="180">
			  	  </el-table-column>
			  	  <el-table-column
			  	    prop="sex"
			  	    label="性别"
			  	    width="180">
			  	  </el-table-column>
			  	  <el-table-column
			  	    prop="birthDay"
			  	    label="出生日期">
			  	  </el-table-column>
			  	  <el-table-column
			  	    prop="telnum"
			  	    label="手机号码">
			  	  </el-table-column>
			  	  <el-table-column
			  	    prop="createTime"
			  	    label="注册时间">
			  	  </el-table-column>
			  	 <el-table-column prop="date" label="操作" width="180">
			  	 	<template slot-scope="scope">
			  	 		<div class="btn_home">
			  				<el-button   type="text" size="small"@click="employerinf(scope.row)">雇主信息</el-button>
			  				<el-button  type="text" size="small" @click="comment(scope.row)">点评</el-button>
			  				<el-button  type="text" size="small" @click="unblock(scope.row)">撤销拉黑</el-button>
			  			</div>
			  	 	</template>
			  	 </el-table-column>
			     </el-table>
			  <!-- <el-table
			        :data="tableData"
			        style="width: 100%;">
			      <el-table-column prop="tdaccount" label="会员ID" width="160"></el-table-column>
			  	  <el-table-column prop="nickname" label="会员姓名" width="160"></el-table-column>
			  	  <el-table-column prop="name" label="实名姓名" width="160"></el-table-column>
			  	  <el-table-column prop="idnumber" label="证件号码" width="170"></el-table-column>
			  	  <el-table-column prop="sex" label="性别" width="170"></el-table-column>
			  	  <el-table-column prop="birthDay" label="出生日期" width="170"></el-table-column>
			  	  <el-table-column prop="telnum" label="手机号码" width="170"></el-table-column>
			  	  <el-table-column prop="createTime" label="注册时间" width="170"></el-table-column>
			  	  <el-table-column label="操作" width="300">
			  		   <template slot-scope="scope">
			  		          <el-button style="border: 1px solid; width: 76px;"  type="text" size="small"@click="employerinf(scope.row)">雇主信息</el-button>
			  		          <el-button style="border: 1px solid; width: 76px;" type="text" size="small" @click="comment(scope.row)">点评</el-button>
			  		          <el-button style="border: 1px solid; width: 76px;" type="text" size="small" @click="unblock(scope.row)">撤销拉黑</el-button>
			  		   </template>
			  	  </el-table-column>
			      
			      </el-table> -->
		  </el-tab-pane>
		 
		</el-tabs>
		<!-- 雇主信息弹框 -->
		<el-dialog
		  title="雇主信息"
		  :before-close="handleClose"
		  :visible.sync="employerinformation"
		  width="1252px"
		  center>
		  <div class="content">
			  <div class="store-title-bottom">
			  <div class="information">
			 	 <div><span>姓名</span><span>{{name}}</span></div>
			 	 <div><span>身份证号码</span><span>{{idnumber}}</span></div>
			 	 <div><span>地址</span><span>{{domicileAddress}}</span></div>
			 	 <p>身份证正反面照片</p>
			  <div class="PhotoId"><div style="margin-right: 100px;"><img :src="identityFrontPicture"></div><div><img :src="identityVersoPicture"></div></div>
			  					 </div>
			  </div>
		  </div>
		 
		</el-dialog>
		<!-- 点评弹出框 -->
		<el-dialog
		  :visible.sync="comment_box"
		  width="1269px"
		  >
		  <div class="comment">
			  <div class="comment-item" v-for="(item,index) in Comment_list":key="index">
				<span class="anniu">从业者</span><span class="dian one"></span><span style="
				display: inline-block;
				margin: 10px 0 0 48px;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 500;
			    line-height: 20px;
				color: #000000;">从业者姓名</span>  
				<el-button class="del" style="background: #FF0000;" type="danger" @click="onSubmit(item)">删除</el-button>
				 <div class="text"><textarea>这边就是点评的文案内容 后台人员在此界面可查阅点评发现不友好的点评可手动进行删除</textarea></div>
				 <div style="font-size: 18px;
				 font-family: PingFang SC;
				 font-weight: 500;
				 position: absolute;
				 bottom: 0;
				 right: 0;
				 margin-right: 30px;
				 line-height: 25px;
				 color: #7B7B7B;">2021-5-10</div>
			  </div>
		  </div>
		</el-dialog>
		<!-- 拉黑弹框 -->
		<el-dialog
		  :visible.sync="block_box"
		  width="571px"
		  >
		 
		  <div class="block-box">
			  <p style="font-size: 26px;
			            font-family: PingFang SC;
			            font-weight: 500;
			            text-align: center;
						padding-bottom: 11px;
						border-bottom: 1px solid #D8D8D8;
			            line-height: 37px;
			            color: #000000;">拉黑</p>
			<div class="block-box-center">
				<p>拉黑原因</p>
				<textarea v-model="blackreason"></textarea>
				</div>
				<el-button @click="block_sub">确定</el-button>
		  </div>
		 
		</el-dialog>
		<!-- 撤销拉黑弹框 -->
		<el-dialog
		   title="提示"
		   center
		  :visible.sync="unblock_box"
		  width="571px">
		 
		  <div class="unblock-box">
			  <p style="font-size: 26px;
		                font-family: PingFang SC;
		                font-weight: 300;
		                line-height: 37px;
		                color: #000000;
			            text-align: center;
						padding-bottom: 11px;
						border-bottom: 1px solid #D8D8D8;
			            ;">确认撤销拉黑以下雇主？</p>
			<p style="
			text-align: center;
			font-size: 36px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 203px;
			color: #000000;
			">{{name}}</p>
				<el-button @click="unblock_sub" style="">确定</el-button>
		  </div>
		  </el-dialog>
		  <!-- 地址弹框 -->
		  <el-dialog
		     title="提示"
		     center
		    :visible.sync="address_box"
		    width="571px"
		    :before-close="handleClose">
		   <van-area v-on:confirm="confirm1" :area-list="areaList" />
		    </el-dialog>
	</div>
  
</template>
<script>
	import Vue from 'vue';
	import { Area } from 'vant';
	import 'vant/lib/index.css';
	import { areaList } from '@vant/area-data';
	import '@vant/touch-emulator';
	Vue.use(Area);
  export default {
    data() {
      return {
		  options:[{
		  	value:'1',
		  	lable:'男'
		  },{
		  	value:'2',
		  	lable:'女'
		  }],
		  Comment_list:[],//点评列表
		  areaList,
		  address_box:false,
		  unblock_box:false,//撤销拉黑弹框
		  block_box:false,//拉黑弹框
		  comment_box:false,//点评弹框
		  employerinformation:false,//雇主信息弹框
		  value1:'',
		  activeName: 'first',
		  tableData: [],
		  name:'',//实名姓名
		  idnumber:'',//身份证号码
		  domicileAddress:'',//地址
		  identityFrontPicture:'',//身份证正面
		  identityVersoPicture:'',//身份证反面
		  blackreason:'',//拉黑原因
		  userId:'',//指定雇主/从业者的用户id
		  form:{
			  nickname:'',
			  name:'',
			  sex:'',
			  addressProvince:'',
			  addressCity:'',
			  addressCounty:'',
			  ageStart:'',
			  ageEnd:'',
			  telnum:'',
		  },
      };  
    },
    methods: {
		confirm1(res){
			console.log(res[0].name)
			this.form.addressProvince = res[0].name;
			this.form.addressCity = res[1].name;
			this.form.addressCounty = res[2].name;
			this.address_box=false;
			this.form.address=this.form.addressProvince+'-'+this.form.addressCity+'-'+this.form.addressCounty;
		},
		// 查询
		query(e){
			if(this.value1==null){this.value1=''};
			 this.$houseAxios.post('/house/employers/selectEmpoyerMgmtList',{
				 startTime:this.value1[0]||'',
				 endTime:this.value1[1]||'',
				 nickname:this.form.nickname,
				 name:this.form.name,
				 sex:this.form.sex,
				 ageStart:this.form.ageStart,
				 ageEnd:this.form.ageEnd,
				 condition:e
			 }).then(res=>{
				 console.log(res)
				 this.tableData=res.data.data.employersMgmtList;
			 }).catch(err=>{})
		},
		// 关闭弹框按钮
		handleClose(){
			this.address_box=false;
			this.employerinformation=false;
			this.name = '';
			this.idnumber = '';
			this.domicileAddress = '';
			this.identityFrontPicture = '';
			this.identityVersoPicture = '';
			this.Auditinf={};
		},
		onSubmit(row){
			
		},
		// 切换页面
      handleClick(tab, event) {
        console.log(tab, event);
		this.form={};
		if(tab.label=='黑名单'){
			this.getlist('2')
		}else if(tab.label=='雇主列表'){
			this.getlist('1')
		}
      },
	  // 确认撤销拉黑
	  unblock_sub(){
		  this.$houseAxios.get('/house/employers/updateCertificationCondition',{
		  			  params:{
						 blackreason:'',
		  				condition:1,
		  				userId:this.userId
		  			  }
		  }).then(res=>{
		  		console.log(res)
		  		if(res.data.code==1000){
		  			this.unblock_box=false;
					this.getlist('2')
		  			this.userId='';
				    this.name="";
		  		}
		  }).catch(err=>{})  
	  },
	  // 撤销拉黑
	  unblock(row){
		 this.unblock_box=true; 
		 this.userId = row.userId;
		 this.name=row.name;
	  },
	  // 确认拉黑
	  block_sub(){
		  if(this.blackreason==''){
			  this.$message({
				  message:'请输入拉黑原因'
			  });
			  return;
		  }
		this.$houseAxios.get('/house/employers/updateCertificationCondition',{
					  params:{
						blackreason:this.blackreason,
						condition:2,
						userId:this.userId
					  }
		}).then(res=>{
				console.log(res)
				if(res.data.code==1000){
					this.block_box=false;
					this.getlist('1')
					this.userId='';
				}
		}).catch(err=>{})  
	  },
	  // 点击拉黑
	  block(row){
		  this.block_box=true;
		  this.userId = row.userId;
	  },
	  // 查看点评
	  comment(row){
		console.log(row)
	  	this.comment_box = true;
		this.get_comment(row);
	  },
	  // 获取点评详情
	  get_comment(row){
		 this.$houseAxios.get('/house/employers/selectPractitioneByEmpUserId',{
			 params:{
				 userId:row.userId
			 }
		 }).then(res=>{
			 console.log(res)
			 this.Comment_list = res.data.data;
		 }).catch(err=>{})
	  },
	  // 点击雇主信息
	  employerinf(row){
		this.employerinformation=true;
		this.name = row.name;
		this.idnumber = row.idnumber;
		this.domicileAddress = row.domicileAddress;
		this.identityFrontPicture = row.identityFrontPicture;
		this.identityVersoPicture = row.identityVersoPicture;
		
	  },
	  // 获取列表
	  getlist(e){
		  console.log(typeof(e))
		 this.$houseAxios.post('/house/employers/selectEmpoyerMgmtList', {
		 		condition:e
		 	}).then(res=>{
				console.log(res)
				this.tableData=res.data.data.employersMgmtList;
				console.log(this.tableData)
			}).catch(err=>{})
	  }
    },
	created() {
		this.getlist('1')
	}
  };
</script>

<style scoped="scoped">
	/deep/.el-input__inner{
		height: 33px;
		margin-top: 3px;
	}
	/deep/.el-range-editor.el-input__inner{
		height: 33px;
		margin-top: 3px;
	}
	/deep/.el-tabs--card>.el-tabs__header .el-tabs__nav{
		border: none;
	}
	/deep/.el-tabs--card>.el-tabs__header{
			border: none;
		}
	/deep/.el-tabs--card>.el-tabs__header{
		border: none;
	}
	/deep/.el-tabs__content{
			height: 855px;
			background: #FFFFFF;
			border: 1px solid #CCCCCC;
		}
	.el-tabs {
		width: 95%;
		margin: 2% auto;
	}
	/deep/.el-table td{
			text-align: center;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 22px;
			color: #000000;
		}
	/deep/.el-tabs__item{
		width: 111px;
		height: 46px;
		border-radius: 5px;
		text-align: center;
		font-size: 18px;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40px;
		color: #000000;
	}
	/deep/.el-tabs__item.is-active{
		background: #004DD5;
		color: white;
	}
	/deep/.el-tabs--card>.el-tabs__header .el-tabs__item{
		margin-right: 20px;
		border: none;
		width: 125px;
	}
	/deep/.el-table th{
		background-color: #004DD5;
		font-size: 17px;
	    font-family: PingFang SC;
	    font-weight: 500;
	    line-height: 16px;
	    text-align: center;
	    color: #FFFFFF;
	}
	/deep/.el-table td{
		text-align: center;
		font-size: 13px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 22px;
		color: #000000;
	}
	/deep/.el-dialog__title{
		font-size: 32px;
		    font-family: PingFang SC;
		    font-weight: bold;
		    line-height: 45px;
			margin-top: 30px;
			display: inline-block;
			margin-top: 13px;
	}
	.input{
		    display: flex;
	}
	.input>p{
		width: 100px;
		text-align: center;
	}
	.store-title-bottom>p{
		font-size: 32px;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45px;
		color: #000000;
		text-align: center;
	}
	.store-title-bottom>.information{
		display: flex;
		flex-direction: column;
	}
	.information>div{
		margin: 20px;
	}
	.information>div>span:nth-child(1){
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 37px;
		color: #676767;
		display: inline-block;
		width: 150px;
	}
	.information>div>span:nth-child(2){
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 37px;
		color: #000000;
	}
	.information>p{
		margin: 20px;
		font-size: 26px;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 37px;
		color: #676767;
	}
	.PhotoId>div{
		display: inline-block;
		width: 400px;
		height: 300px;
	}
	.PhotoId>div>img{
		width: 100%;
		height: auto;
	}
	.comment{
		width: 1122px;
		height:915px;
		/* border: 1px solid; */
		margin: 0 auto;
		margin-top: 55px;
	}
	
	
		.comment-item{
			height: 141px;
			width: 100%;
			position: relative;
			border: 1px solid #707070;
			border-radius: 5px;
			padding: 16px;
		}
		.comment-item>span{
			margin: 4px;
		}
		.anniu{
			display: inline-block;
			width: 50px;
			height: 27px;
			background: #004EFF;
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 20px;
			color: #FFFFFF;
			border-radius: 5px;
			text-align: center;
		}
		.dian{
			display: inline-block;
			width: 33px;
			height: 33px;
			background: #000000;
			border: 1px solid #000000;
			border-radius: 50%;
			position: absolute;
		}
		.del{
			position: absolute;
			right: 0;
			margin-right: 10px;
		}
		.text{
			margin:22px 0 0 79px;
		}
		.text>textarea{
			width: 708px;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 25px;
			color: #000000;
			border: none;
		}
		.block-box{
			height: 471px;
		}
		.block-box-center{
			margin: 0 auto;
			margin-top: 35px;
			width: 503px;
			
		}
		.block-box-center>p{
			font-size: 20px;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 28px;
			color: #434343;
		}
		.block-box-center>textarea{
			width: 503px;
			height: 168px;
			background: #FFFFFF;
			margin-top: 12px;
		}
		.block-box>.el-button{
			width: 186px;
			height: 41px;
			background: #004DD5;
			border: 1px solid #707070;
			opacity: 1;
			border-radius: 5px;
			display: inherit;
			margin: 80px auto;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
		.unblock-box{
			height: 327px;
		}
		.unblock-box>.el-button{
			width: 186px;
			height: 41px;
			background: #004DD5;
			border: 1px solid #707070;
			opacity: 1;
			border-radius: 5px;
			display: block;
			margin: 30px auto;
			font-size: 18px;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
</style>
